<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!--    <script th:src="@{../assets/jquery/jquery.js}"></script>-->
<!--    <meta charset="UTF-8">-->
<!--    <link type="text/css" th:href="@{../assets/css/theme.css}" rel="stylesheet">-->
<!--    <script type="text/javascript" th:src="@{../assets/js/bootstrap/bootstrap.min.js}"></script>-->
<!--    <script th:src="@{../assets/vendor/jquery/jquery.min.js}"></script>-->
<!--    <script th:src="@{../assets/vendor/popper/popper.min.js}"></script>-->

<!--    &lt;!&ndash; FontAwesome 5 &ndash;&gt;-->
<!--    <script th:src="@{../assets/vendor/fontawesome/js/fontawesome-all.min.js}"></script>-->

<!--    &lt;!&ndash; Boomerang JS &ndash;&gt;-->
<!--    <script th:src="@{../assets/js/theme.js}"></script>-->
    <link type="text/css" th:href="@{../assets/dist/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{../assets/jquery/jquery.js}"></script>
    <script type="text/javascript" th:src="@{../assets/dist/js/bootstrap.bundle.min.js}"></script>
    <title>Title</title>
</head>
<body>

<p>dddd</p>
<main class="main">...</main>

<!-- Bootstrap JS -->
<form class="row g-3">
    <div class="col-md-4">
        <label for="validationServer01" class="form-label">First name</label>
        <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
        <div class="valid-feedback">
            Looks good!
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationServer02" class="form-label">Last name</label>
        <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
        <div class="valid-feedback">
            Looks good!
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationServerUsername" class="form-label">Username</label>
        <div class="input-group has-validation">
            <span class="input-group-text" id="inputGroupPrepend3">@</span>
            <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
            <div id="validationServerUsernameFeedback" class="invalid-feedback">
                Please choose a username.
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label for="validationServer03" class="form-label">City</label>
        <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
        <div id="validationServer03Feedback" class="invalid-feedback">
            Please provide a valid city.
        </div>
    </div>
    <div class="col-md-3">
        <label for="validationServer04" class="form-label">State</label>
        <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
            <option selected disabled value="">Choose...</option>
            <option>...</option>
        </select>
        <div id="validationServer04Feedback" class="invalid-feedback">
            Please select a valid state.
        </div>
    </div>
    <div class="col-md-3">
        <label for="validationServer05" class="form-label">Zip</label>
        <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
        <div id="validationServer05Feedback" class="invalid-feedback">
            Please provide a valid zip.
        </div>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
            <label class="form-check-label" for="invalidCheck3">
                Agree to terms and conditions
            </label>
            <div id="invalidCheck3Feedback" class="invalid-feedback">
                You must agree before submitting.
            </div>
        </div>
    </div>
    <div class="col-12">
        <button class="btn btn-primary" type="submit">Submit form</button>
    </div>
</form>



<!-- Button trigger modal -->
<button type="button" class="btn btn-block btn-light" data-toggle="modal" data-target="#modal_1">
    Default modal
</button>
<!-- Modal -->
<div class="modal modal-fluid fade" id="modal_1" tabindex="-1" role="dialog" aria-labelledby="modal_1" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row justify-content-center">
                    <div class="col-lg-8 text-center py-4">
                        <h4 class="heading h3">Unleash your creativity!</h4>
                        <p class="lead text-muted">
                            You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
                        </p>
                        <div class="py-md">
                            <img src="../assets/images/prv/splash.png" class="img-fluid img-center">
                        </div>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Let's do this!</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>